<template>
	<div class="center">
		<h1>广城理在线oj平台登录注册界面</h1>
		<div class="logon">
			<div :class="overlaylong">
				<div class="overlaylong-Signin" v-if="disfiex == 0">
					<h2 class="overlaylongH2">登录</h2>
					<input type="text" v-model="username" placeholder="账号">
					<input type="password" v-model="password" placeholder="密码">
					<h3 @click="forgotPassword">忘记密码</h3>
					<button class="inupbutton" @click="login">登录</button>
					<!-- <button class="inupbutton" @click="测试">测试</button> -->

				</div>
				<div class="overlaylong-Signup" v-if="disfiex == 1">
					<h2 class="overlaylongH2">注册账号</h2>
					<input type="text" v-model="register_username" placeholder="账号">
					<input type="password" v-model="register_password" placeholder="密码">
					<button class="inupbutton" @click="register">注册</button>
				</div>
			</div>
			<div :class="overlaytitle">
				<div class="overlaytitle-Signin" v-if="disfiex == 0">
					<h2 class="overlaytitleH2">欢迎你，朋友！</h2>
					<p class="overlaytitleP">
						输入你的个人信息，然后开启编程之旅吧！
					</p>
					<div class="buttongohs" @click="Signin">注册</div>
				</div>
				<div class="overlaytitle-Signup" v-if="disfiex == 1">
					<h2 class="overlaytitleH2">欢迎回来！</h2>
					<p class="overlaytitleP">请登录以使用您的个人信息保持与我们的联系</p>
					<div class="buttongohs" @click="Signup">登录</div>
				</div>
			</div>
		</div>
		<p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
	</div>
</template>

<script>
	import axios from 'axios';
	import {
		config
	} from '../utils/constant.js'

	export default {
		name: 'Login',
		data() {
			return {
				username: '',
				password: '',
				register_username: '',
				register_password: '',
				errorMessage: '',
				overlaylong: 'overlaylong',
				overlaytitle: 'overlaytitle',
				disfiex: 0
			}
		},

		methods: {
			delect_cookie() {
				document.cookie = "access_token" + "=" + ""
				document.cookie = "refresh_token" + "=" + ""
			},
			login() {
				this.changeButtonColor();
				// axios.post('http://192.168.123.101:8000/login/', {
				// //   username: this.username,
				// //   password: this.password
				//   username: 'w',
				//   password: 'w'
				// })
				// .then(response => {
				//   console.log(response.data);
				//   this.setAuthStatus(true);
				//   const redirect = this.$route.query.redirect || '/dashboard';
				// //   this.$router.push(redirect);
				// })
				// .catch(error => {
				//   console.error('Login error:', error);
				//   this.errorMessage = '登录失败，请检查你的账号密码。';
				// });
				// this.$router.push('dashboard')

				if (this.username == '' || this.password == '') {
					alert('请输入账号和密码')

				}
				let FormData = require('form-data');
				let data = new FormData();
				data.append('username', this.username);
				data.append('password', this.password);

				const axiosconfig = {
					method: 'post',
					url: config.baseUrl + '/login/',
					headers: {
						// 'User-Agent': 'Apifox/1.0.0 (https://www.apifox.cn)',
						// ...data.getHeaders()
					},
					data: data
				};
				let self = this
				axios(axiosconfig)
					.then(function (response) {
						console.log(response);
						if (response.status == "200") {
							console.log(66)
							if (response.data.access && response.data.refresh) {
								document.cookie = "access_token" + "=" + response.data.access
								document.cookie = "refresh_token" + "=" + response.data.refresh
							}
							self.$router.push('/dashboard')
						} else {
							alert('登录失败，请检查你的账号密码。')
						}


					})
					.catch(function (error) {
						// console.log(error);
					});
			},
			register() {
				let FormData = require('form-data');
				let data = new FormData();
				data.append('username', this.register_username);
				data.append('password', this.register_password);

				const axiosconfig = {
					method: 'post',
					url: config.baseUrl + '/register/',
					headers: {
						// 'User-Agent': 'Apifox/1.0.0 (https://www.apifox.cn)',
						// ...data.getHeaders()
					},
					data: data
				};

				axios(axiosconfig)
					.then(function (response) {
						console.log(response.data.message);

					})
					.catch(function (error) {
						// console.log(error);
					});
			},
			setAuthStatus(status) {
				localStorage.setItem('isAuthenticated', status);
			},
			changeButtonColor() {
				const loginButton = this.$el.querySelector('.inupbutton');
				loginButton.style.backgroundColor = 'blue';
			},
			forgotPassword() {
				console.log('忘记密码');
			},
			Signin() {
				this.overlaylong = "overlaylongleft"
				this.overlaytitle = "overlaytitleright"
				setTimeout(() => {
					this.disfiex = 1
				}, 200)
			},
			Signup() {
				this.overlaylong = "overlaylongright"
				this.overlaytitle = "overlaytitleleft"
				setTimeout(() => {
					this.disfiex = 0
				}, 200)
			}
		}
	}
</script>

<style scoped>
  .center {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-image: url('@/assets/微信图片_20240715203026.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  h1 {
    font-size: 30px;
    color: black;
    margin-bottom: 20px;
    z-index: 1;
  }

  .logon {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    width: 768px;
    max-width: 100%;
    min-height: 480px;
    display: flex;
    background: linear-gradient(to right, #4284db, #29eac4);
    z-index: 1;
  }

  .overlaylong {
    border-radius: 10px 0 0 10px;
    width: 50%;
    height: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .overlaylongleft {
    border-radius: 0px 10px 10px 0px;
    width: 50%;
    height: 100%;
    background-color: #fff;
    transform: translateX(100%);
    transition: transform 0.6s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .overlaylongright {
    border-radius: 10px 0 0 10px;
    width: 50%;
    height: 100%;
    background-color: #fff;
    transform: translateX(0%);
    transition: transform 0.6s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .overlaytitle {
    border-radius: 0px 10px 10px 0px;
    width: 50%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .overlaytitleH2 {
    font-size: 30px;
    color: #fff;
    margin-top: 20px;
  }

  .overlaytitleP {
    font-size: 15px;
    color: #fff;
    margin-top: 20px;
  }

  .overlaytitleleft {
    border-radius: 0px 10px 10px 0px;
    width: 50%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(0%);
    transition: transform 0.6s ease-in-out;
  }

  .overlaytitleright {
    border-radius: 0px 10px 10px 0px;
    width: 50%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-100%);
    transition: transform 0.6s ease-in-out;
  }

  .overlaytitle-Signin,
  .overlaytitle-Signup {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .buttongohs {
    width: 180px;
    height: 40px;
    border-radius: 50px;
    border: 1px solid #fff;
    color: #fff;
    font-size: 15px;
    text-align: center;
    line-height: 40px;
    margin-top: 40px;
    cursor: pointer;
  }

  .overlaylongH2 {
    font-size: 25px;
    color: black;
  }

  .overlaylong-Signin,
  .overlaylong-Signup {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  input {
    background-color: #eee;
    border: none;
    padding: 12px 15px;
    margin: 10px 0;
    width: 240px;
  }

  h3 {
    font-size: 10px;
    margin-top: 10px;
    cursor: pointer;
  }

  .inupbutton {
    background-color: #29eac4;
    border: none;
    width: 180px;
    height: 40px;
    border-radius: 50px;
    font-size: 15px;
    color: #fff;
    text-align: center;
    line-height: 40px;
    margin-top: 30px;
    cursor: pointer;
  }

  .error-message {
    color: red;
    margin-top: 10px;
    z-index: 1;
  }
</style>